<template>
    <div class="comment-card">
      <div class="comment-header">
        <div class="user-avatar">
          {{ comment.user.username?.charAt(0) || 'U' }}
        </div>
        <div class="user-info">
          <div class="username">{{ comment.user.username || '匿名用户' }}</div>
          <div class="timestamp">{{ formatDate(comment.createdAt) }}</div>
        </div>
      </div>
      
      <div class="comment-content">
        {{ comment.content }}
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { defineProps } from 'vue'
  
  defineProps({
    comment: {
      type: Object,
      required: true
    }
  })
  
  const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  }
  </script>
  
  <style scoped lang="scss">
  .comment-card {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s;
    
    &:hover {
      background: #e9ecef;
      transform: translateY(-2px);
    }
  }
  
  .comment-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin-right: 15px;
  }
  
  .user-info {
    .username {
      font-weight: 500;
      color: #2c3e50;
      margin-bottom: 4px;
    }
    
    .timestamp {
      font-size: 13px;
      color: #7f8c8d;
    }
  }
  
  .comment-content {
    line-height: 1.6;
    color: #333;
    font-size: 16px;
  }
  </style>